<template>
  <div id="app">
    <div class="tabbar tabblock">
      <span :class="{active: isActive== m.path}"  @click="goto1(m.path,index)" v-for="(m,index) in menulist">{{m.name}}</span>
    </div>
    <page-view/>
  </div>
</template>

<script>
export default {
  data () {
    return {
      isActive: 'index',
      menulist: [
        {path:'index',name:'首页'},
        // {path:'home',name:'信息商城'},
        {path:'freight',name:'运价计算器'},
        // {path:'my',name:'我的'}
      ]
    }
  },
  created () {
    window.abc = this
      sessionStorage.setItem('isActive', this.$router.currentRoute[0][1].path)
  },
  mounted () {
    this.isActive = sessionStorage.getItem('isActive')
  },
  methods: {
    goto1 (path,index) {
      this.$router.goto(path)
      this.isActive = path
      sessionStorage.setItem('isActive', this.isActive)
    }
  }
}
</script>

<style>
.page-wrap{
  height: auto !important;
}
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
.tabbar{
    padding: 8px 0px;
    background: #fff;
    width: 100%;
    position: absolute;
    bottom: 0;
    left: 0;
    text-align: center;
    display: flex;
    justify-content: space-around;
    z-index: 10;
}
.page-wrap .page-view{overflow: hidden;}
.active{color: #EA571D}
/*页面切换*/
.page-view-enter, .page-view-right-leave-active {
  transform: translateX(100%) !important;
}
.page-view-leave-active, .page-view-right-enter {
  transform: translateX(-100%) !important;
}
</style>
